<template>
	<view class="treebg">
		<view style="font-size: 20px;margin-bottom: 10px;display: flex;justify-content: center;">
			<text>选择厂房</text>
		</view>
		<DaTree :data="roomTreeData" labelField="name" valueField="id" :showRadioIcon="false" loadMode
			:loadApi="GetApiData" style="color: white;" @change="handleTreeChange">
		</DaTree>
	</view>

</template>
<script>
	import {
		defineComponent,
		ref
	} from 'vue'
	import DaTree from '@/components/da-tree/index.vue'
	import apiPath from '@/common/apiPath.js'
	import request from '@/common/callApi.js'

	/**
	 * 模拟创建一个接口数据
	 */

	export default defineComponent({
		components: {
			DaTree
		},
		props: {
			close: {
				type: Function,
				default: null
			}
		},
		setup(props) {
			const DaTreeRef = ref()

			const roomTreeData = ref([])

			async function fetchNodes() {
				let params = {
					parent_id: 0
				}
				const {
					data
				} = await request(apiPath.nodes, params, 'GET')
				const list = data.list
				roomTreeData.value = list
			}
			async function GetApiData(currentNode) {
				const {
					originItem
				} = currentNode
				let params = {
					parent_id: originItem.id
				}
				const {
					data
				} = await request(apiPath.nodes, params, 'GET')
				const list = data.list

				return new Promise((resolve) => {
					if (list.length == 0) {
						props.close(originItem)
						return resolve(list)
					}
					return resolve(list)
				})
			}

			fetchNodes()

			function handleTreeChange(allSelectedKeys, currentItem) {
				//修改了内部方法 handleLabelClick 注释部分
				//作用：点击标签也如同点击图标一般加载数据
			}


			return {
				DaTreeRef,
				roomTreeData,
				GetApiData,
				close,
				handleTreeChange
			}
		},
	})
</script>

<style scoped>
	.treebg {
		background-color: #1d1e1f;
		height: 100vh;
		color: white;
		padding: 1vh 1vw;
	}
</style>